<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="resources/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="resources/css/public.css" media="all" />
    <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<br>
<input type="button" id="btn1" class="layui-btn-danger" value="客户分析">
<input type="button" id="btn2" class="layui-btn-danger" value="年份分析">
<hr>
<br>
<div id="main" style="width: 800px;height:450px;"></div>
<script type="text/javascript">
    var i=0;
    if (i==0){
        $(document).ready(function(){
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            //数据加载完之前先显示一段简单的loading动画
            myChart.showLoading();
            var custNames=[];   //横坐标数组（实际用来盛放X轴坐标值）
            var prices=[];    //纵坐标数组（实际用来盛放Y坐标值）
            $.ajax({
                type : "GET",
                async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
                url : "orders/findCustomerPriceTotal",  //请求发送到dataActiont处
                data : {},
                dataType : "json",        //返回数据形式为json
                success : function(result) {
                    //请求成功时执行该函数内容，result即为服务器返回的json对象
                    if (result) {
                        for(var i=0;i<result.length;i++){
                            custNames.push(result[i].custName);
                            prices.push(result[i].pricetotal);
                        }
                        myChart.hideLoading();    //隐藏加载动画
                        myChart.setOption({
                            //加载数据图表
                            title:{
                                text: '顾客贡献分析'
                            },
                            legend: {
                                data:['总金额']
                            },
                            xAxis: {
                                data: custNames,
                                axisLabel:{
                                    interval: 0
                                }
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [{
                                // 根据名字对应到相应的系列
                                name: '',
                                type: 'bar',
                                itemStyle: {
                                    normal: {
                                        color: function(params) {
                                            var colorList = [
                                                '#27727B',
                                            ];
                                            return colorList[params.dataIndex]
                                        },
                                        label: {
                                            show: true,
                                            position: 'top',
                                            formatter: '{b}\n{c}'
                                        }
                                    }
                                },
                                data: prices
                            }]
                        });
                    }
                },
                error : function(errorMsg) {
                    //请求失败时执行该函数
                    alert("图表请求数据失败!");
                    myChart.hideLoading();
                }
            });//end ajax
        });
    }

    $("#btn2").click(function () {
        i=1;
        //这是年份的
        $(document).ready(function(){
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            //数据加载完之前先显示一段简单的loading动画
            myChart.showLoading();
            var dateTime=[];   //横坐标数组（实际用来盛放X轴坐标值）
            var pricetotal=[]; //纵坐标数组（实际用来盛放Y坐标值）
            $.ajax({
                type : "GET",
                async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
                url : "orders/findYearDatePriceTotal",  //请求发送到dataActiont处
                data : {},
                dataType : "json",        //返回数据形式为json
                success : function(result) {
                    //请求成功时执行该函数内容，result即为服务器返回的json对象
                    if (result) {
                        for(var i=0;i<result.length;i++){
                            dateTime.push(result[i].dateTime);
                            pricetotal.push(result[i].pricetotal);
                        }
                        myChart.hideLoading();    //隐藏加载动画
                        myChart.setOption({
                            //加载数据图表
                            title:{
                                text: '年份金额分析'
                            },
                            legend: {
                                data:['总金额']
                            },
                            xAxis: {
                                data: dateTime,
                                axisLabel:{
                                    interval: 0
                                }
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [{
                                // 根据名字对应到相应的系列
                                name: '',
                                type: 'bar',
                                itemStyle: {
                                    normal: {
                                        color: function(params) {
                                            var colorList = [
                                                '#27727B',
                                            ];
                                            return colorList[params.dataIndex]
                                        },
                                        label: {
                                            show: true,
                                            position: 'top',
                                            formatter: '{b}\n{c}'
                                        }
                                    }
                                },
                                data: pricetotal
                            }]
                        });
                    }
                },
                error : function(errorMsg) {
                    //请求失败时执行该函数
                    alert("图表请求数据失败!");
                    myChart.hideLoading();
                }
            });//end ajax
        });
    });
    $("#btn1").click(function () {
        $(document).ready(function(){
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            //数据加载完之前先显示一段简单的loading动画
            myChart.showLoading();
            var custNames=[];   //横坐标数组（实际用来盛放X轴坐标值）
            var prices=[];    //纵坐标数组（实际用来盛放Y坐标值）
            $.ajax({
                type : "GET",
                async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
                url : "orders/findCustomerPriceTotal",  //请求发送到dataActiont处
                data : {},
                dataType : "json",        //返回数据形式为json
                success : function(result) {
                    //请求成功时执行该函数内容，result即为服务器返回的json对象
                    if (result) {
                        for(var i=0;i<result.length;i++){
                            custNames.push(result[i].custName);
                            prices.push(result[i].pricetotal);
                        }
                        myChart.hideLoading();    //隐藏加载动画
                        myChart.setOption({
                            //加载数据图表
                            title:{
                                text: '顾客贡献分析'
                            },
                            legend: {
                                data:['总金额']
                            },
                            xAxis: {
                                data: custNames,
                                axisLabel:{
                                    interval: 0
                                }
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [{
                                // 根据名字对应到相应的系列
                                name: '',
                                type: 'bar',
                                itemStyle: {
                                    normal: {
                                        color: function(params) {
                                            var colorList = [
                                                '#27727B',
                                            ];
                                            return colorList[params.dataIndex]
                                        },
                                        label: {
                                            show: true,
                                            position: 'top',
                                            formatter: '{b}\n{c}'
                                        }
                                    }
                                },
                                data: prices
                            }]
                        });
                    }
                },
                error : function(errorMsg) {
                    //请求失败时执行该函数
                    alert("图表请求数据失败!");
                    myChart.hideLoading();
                }
            });//end ajax
        });
    })



</script>
</body>
</html>